<template>
  <div class="page">
    <div class="top">
      <div style="float:left;">
        <span @click="goBack" class="goback">报表管理</span> |
        <span>添加报表</span>
      </div>
      <el-button type="primary" size="small" id="goback" @click="goBack"
        >返回</el-button
      >
    </div>
    <div class="bottom">
      <div class="bottom_left">
        <el-form
          :model="addReportForm"
          ref="addReportForm"
          style="text-align: left; margin-top: .3rem;"
        >
          <el-form-item label="所属项目:" :label-width="formLabelWidth">
            <el-select
              @change="changeProject()"
              v-model="addReportForm.product_id"
              placeholder="选择项目"
              class="inpu"
              style="width: 5rem !important;"
            >
              <el-option
                v-for="item in all_project"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="报表名称:" :label-width="formLabelWidth">
            <el-input
              v-model="addReportForm.title"
              auto-complete="off"
              class="inpu"
              style="width: 5rem !important;"
              placeholder="请输入报表名称"
            ></el-input>
          </el-form-item>

          <el-form-item label="统计算法:" :label-width="formLabelWidth">
            <el-select
              v-model="addReportForm.algorithm"
              placeholder="选择周期"
              class="inpu"
              style="width: 5rem !important;"
            >
              <el-option
                v-for="item in rAlgorithm"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              ></el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="报表类型:" :label-width="formLabelWidth">
                        <el-select v-model="addReportForm.type" placeholder="选择类型" class="inpu"
                            style="width: 5rem !important;">
                            <el-option v-for="item in rType" :key="item.value" :value="item.value"
                                :label="item.label"></el-option>
                        </el-select>
                    </el-form-item> -->

          <!-- <span style="font-size:16px">{{ point_data }}</span> -->
        </el-form>
      </div>
      <div class="bottom_right">
        <!-- 设备列表 -->
        <div style="width:100%;height:100%; display:inline-block; ">
          <el-form
            style="text-align: left;margin-top:0.2rem;line-height:0.25rem;height:100%;"
          >
            <el-form-item label="" label-width="15px" style="width:100%;">
              <h3
                class="dialTitle"
                style="display:inline-block;margin-right:0.2rem;"
              >
                数据点
              </h3>
              <el-button @click="addPoint()" type="primary" plain size="mini"
                >添加数据点</el-button
              >
              <div class="sensorHead">
                <span class="inpu_b"
                  >设备名称
                  <!-- <el-tooltip placement="top" effect="light" style="margin-left:0.1rem;margin-top:-2px;">
                    <div slot="content" style="line-height:0.4rem;color:red;font-size:0.3rem!important;">
                      选择设备前需先选择项目
                    </div>
                    <span class="sortIcon" style="color:red;">?</span>
                  </el-tooltip> -->
                </span>
                <span class="inpu_b">组名称</span>
                <span class="inpu_b"
                  >数据点
                  <!-- <el-tooltip placement="top" effect="light"
                                        style="margin-left:0.1rem;margin-top:-2px;">
                                        <div slot="content"
                                            style="line-height:0.4rem;color:red;font-size:0.3rem!important;">
                                            选择数据点前需先选择设备</div>
                                        <span class="sortIcon" style="color:red;">?</span>
                                    </el-tooltip> -->
                </span>
                <span class="inpu_b">别名</span>
              </div>
            </el-form-item>
            <div class="cycleBox">
              <el-form-item
                v-for="(domain, index) in point_data"
                label-width="15px"
                class="oneDomain"
                style="width:100%;"
                :key="index + 't'"
              >
                <el-select
                  class="inpu_z"
                  v-model="domain.equip_id"
                  placeholder="选择设备"
                  @change="change_device(domain, all_equip, index)"
                >
                  <el-option
                    v-for="item in all_equip"
                    :key="item.value"
                    :value="item.value"
                    :label="item.label"
                  ></el-option>
                </el-select>
                <!-- 组别 -->
                <el-select
                  class="inpu_z"
                  v-model="domain.sgroup_id"
                  placeholder="选择组"
                  @change="change_group(domain, index)"
                >
                  <el-option
                    v-for="item in domain.groupOption"
                    :key="item.value"
                    :value="item.value"
                    :label="item.label"
                  ></el-option>
                </el-select>

                <!-- <el-input class="inpu_z" v-model="domain.equip_id" placeholder="周期名称"></el-input> -->
                <el-select
                  @change="change_point(domain, index)"
                  v-model="domain.sensor_id"
                  placeholder="选择数据点"
                  class="inpu_z"
                >
                  <el-option
                    v-for="item in domain.dataPoints"
                    :key="item.value"
                    :value="item.value"
                    :label="item.label"
                  ></el-option>
                </el-select>

                <!-- <el-input class="inpu_z" type="number" min="0" step="1" v-model="domain.sensor_id"
                                    placeholder="周期时长"></el-input> -->
                <el-input
                  class="inpu_z"
                  v-model="domain.alias_name"
                  placeholder="输入别名"
                ></el-input>
                <el-button
                  @click.prevent="remove_point(domain)"
                  type="danger"
                  size="mini"
                  plain
                  v-if="point_data.length > 1"
                  >删除</el-button
                >
                <span
                  @click="toUp(index)"
                  v-if="point_data.length > 1"
                  class="el-icon-top order_btn"
                ></span>
                <span
                  @click="toDown(index)"
                  v-if="point_data.length > 1"
                  class="el-icon-bottom order_btn"
                ></span>
              </el-form-item>
            </div>
            <!-- <div style="font-size: .2rem;">{{ point_data }}</div> -->
            <el-button
              @click="sureAddReport()"
              size="mini"
              style="margin-left:1rem"
              type="primary"
              round
              >确定添加报表</el-button
            >
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getAllProject, getEquipAll } from "../request.js";
export default {
  name: "addUser",
  data() {
    return {
      isActive: "",
      all_project: [],
      all_equip: [],
      formLabelWidth: "90px",
      addReportForm: {
        product_id: "",
        title: "",
        algorithm: "increment",
        // type: '',
        points: []
      },
      rType: [
        { value: "1", label: "日报" },
        // { value: '2', label: '周报' },
        { value: "3", label: "月报" },
        { value: "4", label: "年报" }
      ],
      rAlgorithm: [
        { value: "min", label: "最小值" },
        { value: "max", label: "最大值" },
        { value: "mean", label: "平均值" },
        { value: "increment", label: "增长值" }
      ],
      // 数据点
      // point_data: {
      //     points: [
      //         {
      //             "equip_id": "",
      //             "equip_name": "",
      //             "sensor_id": '',
      //             "sensor_name": '',
      //             "alias_name": ''
      //         }
      //     ],
      //     dataPoints: [],
      // },
      point_data: [
        {
          equip_id: "",
          equip_name: "",

          sgroup_id: "",
          sgroup_name: "",
          groupOption: [],

          sensor_id: "",
          sensor_name: "",
          alias_name: "",
          dataPoints: [] // 存储数据点选项的数组
        }
      ],

      // currentDeviceName: '',
      currentPointName: ""
    };
  },
  created() {
    // 所有项目的下拉
    var that = this;
    this.getAllProject();
    setTimeout(() => {
      that.getEquipAll();
    }, 700);
  },
  methods: {
    // 拿所有的项目下拉
    getAllProject() {
      getAllProject().then(data => {
        this.all_project = data;
        this.addReportForm.product_id = data[0].value;
      });
    },
    // 拿所有的设备下拉
    getEquipAll(id = this.addReportForm.product_id) {
      getEquipAll(id).then(data => {
        this.all_equip = data;
      });
    },
    //改变项目
    changeProject() {
      this.getEquipAll();
      this.point_data = [
        {
          equip_id: "",
          equip_name: "",

          sgroup_id: "",
          sgroup_name: "",
          groupOption: [],

          sensor_id: "",
          sensor_name: "",
          alias_name: "",
          dataPoints: [] // 存储数据点选项的数组
        }
      ];
    },
    // 改变设备
    change_device(w, all_equip, index) {
      // w.sensor_id = ''
      this.point_data[index].dataPoints = [];
      this.point_data[index].sensor_id = "";
      this.point_data[index].alias_name = "";
      this.point_data[index].sgroup_id = "";
      this.point_data[index].groupOption = [];
      const targetItem = all_equip.find(item => item.value === w.equip_id);
      w.equip_name = targetItem.label;
      // this.currentDeviceName = targetItem.label;

      this.$http({
        method: "post",
        url: "api/sensor_group/all",
        // url: 'api/equip/sensor',
        data: {
          equip_id: w.equip_id
        }
      })
        .then(res => {
          if (res && res.data.result == "success") {
            // console.log('设备下的所有的组', res);

            this.point_data[index].groupOption = res.data.data.map(
              (item, index) => ({
                value: item.id,
                label: item.sgroup_name
              })
            );
            // this.point_data[index].dataPoints = res.data.data.map((item, index) => ({
            //     value: item.id,
            //     label: item.sensor_name,
            //     unit: item.unit
            // }));
            // 测试新的
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 改变组别
    change_group(w, index) {
      // console.log('变组别', w, index)
      this.point_data[index].sensor_id = "";
      this.point_data[index].alias_name = "";
      const targetItem = this.point_data[index].groupOption.find(
        item => item.value === w.sgroup_id
      );
      w.sgroup_name = targetItem.label;
      //////////////////
      this.$http({
        method: "post",
        url: "api/sensor/all",
        data: {
          sgroup_id: w.sgroup_id,
          is_save: 1
        }
      })
        .then(res => {
          if (res && res.data.result == "success") {
            // console.log('组下的所有的数据点', res);

            this.point_data[index].dataPoints = res.data.data.map(
              (item, index) => ({
                value: item.id,
                label: item.sensor_name,
                unit: item.unit
              })
            );
            // 测试新的
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 改数据点
    change_point(z, index) {
      const targetItem = this.point_data[index].dataPoints.find(
        item => item.value === z.sensor_id
      );
      // console.log('找的数据', this.point_data[index])
      z.sensor_name = targetItem.label;
      this.currentPointName = targetItem.label;
      if (targetItem.unit) {
        z.alias_name =
          this.point_data[index].equip_name +
          " - " +
          this.currentPointName +
          "(" +
          targetItem.unit +
          ")";
      } else {
        z.alias_name =
          this.point_data[index].equip_name + "-" + this.currentPointName;
      }
    },
    addPoint() {
      // console.log("this.point_data", this.point_data);
      // this.point_data.push({
      //   equip_id: "",
      //   equip_name: "",

      //   sgroup_id: "",
      //   sgroup_name: "",yixaing
      //   groupOption: [],

      //   sensor_id: "",
      //   sensor_name: "",
      //   alias_name: "",
      //   dataPoints: []
      // });
      // 添加数据点的时候  默认添加和最后一个内容一样
      if (this.point_data.length == 0) {
        this.point_data.push({
          equip_id: "",
          equip_name: "",
          sgroup_id: "",
          sgroup_name: "",
          groupOption: [],
          sensor_id: "",
          sensor_name: "",
          alias_name: "",
          dataPoints: []
        });
      } else {
        let b = this.point_data[this.point_data.length - 1];
        // this.point_data.push(b);
        this.point_data.push({
          equip_id: b.equip_id,
          equip_name: b.equip_name,
          sgroup_id: b.sgroup_id,
          sgroup_name: b.sgroup_name,
          groupOption: b.groupOption,
          sensor_id: b.sensor_id,
          sensor_name: b.sensor_name,
          alias_name: b.alias_name,
          dataPoints: b.dataPoints
        });
      }
    },

    remove_point(item) {
      var index = this.point_data.indexOf(item);
      if (index !== -1) {
        this.point_data.splice(index, 1);
      }
    },
    toUp(i) {
      if (i == 0) {
        return;
      } else {
        let l = this.point_data[i];
        this.point_data[i] = this.point_data[i - 1];
        this.point_data[i - 1] = l;
        this.$forceUpdate();
        // console.log('wanghsang', i)
      }
    },
    toDown(i) {
      // console.log('wangxia ', i)
      if (i == this.point_data.length - 1) {
        // console.log('最后一个')
        return;
      } else {
        let l = this.point_data[i];
        this.point_data[i] = this.point_data[i + 1];
        this.point_data[i + 1] = l;
        this.$forceUpdate();
        // console.log('wanghsang', i, this.point_data[i])
      }
    },

    sureAddReport() {
      this.addReportForm.points = this.point_data.map(item => {
        return {
          equip_id: item.equip_id,
          equip_name: item.equip_name,
          sgroup_id: item.sgroup_id,
          sgroup_name: item.sgroup_name,
          sensor_id: item.sensor_id,
          sensor_name: item.sensor_name,
          alias_name: item.alias_name
        };
      });
      this.$http({
        method: "post",
        url: "api/statement/add",
        data: this.addReportForm
      })
        .then(res => {
          // console.log('添加报表', res);
          if (res && res.data.result == "success") {
            this.$message({
              message: "添加报表成功!",
              type: "success",
              center: true
            });
            this.$router.go(-1);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },

    goBack() {
      this.$router.go(-1);
    }
  }
};
</script>

<style scoped>
.bottom {
  display: flex;
  /* margin-top: 0.1rem; */
  width: 99%;
  height: calc(100% - 1.2rem);
  user-select: none;
  /* border: 1px solid #c73434; */
}

.bottom_left {
  width: 24%;
  padding-right: 1rem;
  /* border: 1px solid #c73434; */
  border-right: 1.3px solid #0b0b0b;
}

.bottom_right {
  /* flex: 1; */
  width: 78%;
  /* border: 1px solid #1b17df; */
  height: 98%;
  /* background-color: #b06f6f; */
  /* display: flex; */
}

.sensorHead {
  height: 0.6rem;
  line-height: 0.6rem;
  /* border: 1px solid red; */
  width: 88%;
  /* padding: .4rem 0; */
  border-bottom: 1px solid #111;
  margin: 0.2rem 0 -0.1rem 0;
  /* padding: 0; */
  /* padding-left: 0.05rem; */
}

.inpu_b {
  display: inline-block;
  width: 21.6%;
  text-align: center;
  margin-left: 0;
  margin-right: 0.1rem;
  border: 0 !important;
  font-size: 0.32rem;
}

.inpu_z {
  width: 21.6%;
  margin-right: 0.1rem;
  text-align: center !important;
  vertical-align: middle;
  border: 1px solid #fff;
  padding: 0;
}

.inpu_z >>> .el-input__inner {
  width: 100%;
}

.cycleBox {
  width: 88%;
  height: 78%;
  overflow-x: hidden;
  overflow-y: auto;
  /* border: 1px solid red; */
  /* margin-top:-0.1rem; */
}

.oneDomain {
  display: block;
  /* margin-left:100px; */
  height: 0.6rem;
  line-height: 0.6rem;
  width: 76%;
  white-space: nowrap;
  padding: 0;
  /* border:1px solid red; */
  /* margin-top:-0.1rem; */
}

.oneDomain >>> .el-input__inner {
  padding-left: 4px;
  padding-right: 0 !important;
  text-align: center;
}

.oneDomain >>> .el-button {
  padding-right: 0.2rem !important;
  padding-left: 0.2rem !important;
}

.order_btn {
  display: inline-block !important;
  cursor: pointer !important;
  font-weight: 900;
  font-size: 0.42rem;
  /* background-color: aquamarine; */
}

.order_btn:hover {
  color: rgb(7, 249, 112) !important;
}
</style>
